  <style type="text/css">
    #code {
        font: 10pt "Andale Mono", Monaco, "Courier New", sans-serif ;
        white-space: pre;
    }

    pre {
        background: #D8F4DC;
        border: 1px solid rgb(200, 200, 200);
        padding-top: 1em;
        padding-left: 3em;
        padding-bottom: 1em;
        margin-top: 1em;
        margin-bottom: 3em;

    }

    p {
        margin: 2em 0;
    }
  </style>

<?php if(!empty($datos_grafico)): ?>
<script id="example_1" type="text/javascript">
    jQuery(document).ready(function(){
    s1 = <?php echo $datos_grafico ?> /*[['Maxi',3], ['Pablo',3],];*/

    plot1 = jQuery.jqplot('chart1', [s1], {
        grid: {
            drawBorder: false,
            drawGridlines: true,
            background: '#ffffff',
            shadow:false
        },
        axesDefaults: {

        },
        seriesDefaults:{
            renderer:jQuery.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: {
            show: true,
            rendererOptions: {
                numberRows: 1
            },
            location: 's'
        }
    });
});
</script>

<script type="text/javascript">
    jQuery(document).ready(function(){

        jQuery(document).unload(function() {$('*').unbind(); });

    });
</script>
<?php endif; ?>

  <h1 style="text-align: center;"><?php echo $titulo; ?></h1>

<?php if(!empty($datos_grafico)): ?>
    <div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; margin: auto;"></div>

    <!--pre id="code_1"></pre-->
<?php else: ?>
<?php echo "No hay datos disponibles para este reporte." ?>
<?php endif; ?>
